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Глава Минздрава призвал декриминализовать врачебную деятельнос 
Глава МИД Испании выступил за продолжение выдачи виз россиянам 
Китай назвал условие установления мира в Тайваньском проливе 
Матвиенко призвала губернаторов избегать ошибок при мобилизации 
За сутки в России выявили более 46 тысяч новых случаев COVID 
Премьер Великобритании потратила часть бюджета в шопе «Норвича 
8 новых необычных сериалов сентября, которые вы могли пропустить 
Оговорки по Фрейду: как психоанализ изменил отношение к психике 


РЕКЛАМА История как я никого не послушал и купил апартаменты 


Просмотр новостей 


Блок новостей: кажущаяся 
простота? 


Новости Спецоперация Москва Спорт Леди Авто Игры += 


Дети 


Как будет работать режим повышенной готовно‹ Здоровье 


Указ, который подписал президент РФ Владимир [T Дом 


Власти запланировали закрыть на ремонт 5 станций на юг 
Тематические В р р ц Питомцы 


табы 


Собянин анонсировал запуск завода «Москвич» 
Синоптик рассказал, когда в Москве начнутся заморозки 
Главврач рассказала о правилах записи в столичные поли 
В Москве появился мурал к столетию российского джаза 
Началась реставрация Спасо-Преображенского собора 
Москвичи могут проверить здоровье в 72 центрах госуслу! 
В Москве за сутки выявили 711 случаев COVID-19 
Слушать щебет птиц полезно для психического здоровья 
Названы победители конкурса Nature Conservancy 2022. d 
ДЕТИ Что должен знать родитель старшеклассника: расск 
HI-TECH Найден идеальный рабочий ноутбук от известногс 


новости Предпринимателям Москвы рассказали, как бес 


HI-TECH Найден ноутбук для повседневных задач 


15 новостей 


12 
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Что скрывается за кажущейся 


простотой? 


Новости Спецоперация Москва Спорт Леди Авто Игры --- 


1. Несколько 
типов 
новостей 


Дети 


< Lf E аса 
1 | Pe Как будет работать режим повышенной готовно‹ Здоровье 


Указ, который подписал президент РФ Владимир [T Дом 


Власти запланировали закрыть на ремонт 5 станций на ю! Питомцы 
Собянин анонсировал запуск завода «Москвич» 
Синоптик рассказал, когда в Москве начнутся заморозки 
Главврач рассказала о правилах записи в столичные поли 
В Москве появился мурал к столетию российского джаза 
2 Началась реставрация Спасо-Преображенского собора 
Москвичи могут проверить здоровье в 72 центрах госуслу! 
В Москве за сутки выявили 711 случаев COVID-19 


Слушать щебет птиц полезно для психического здоровья 


Названы победители конкурса Nature Conservancy 2022. d 


ДЕТИ Что должен знать родитель старшеклассника: расск 
HI-TECH Найден идеальный рабочий ноутбук от известногс 
новости Предпринимателям Москвы рассказали, как бес 


HI-TECH Найден ноутбук для повседневных задач 
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Что скрывается за кажущейся 


простотой? 


1. Несколько 
типов 
новостей 


2. Разные 
источники 
новостей 


Новости Спецоперация Москва Спорт Леди Авто Игры 


Дети 


Как будет работать режим повышенной готовно‹ Здоровье 


Указ, который подписал президент РФ Владимир [T Дом 


Власти запланировали закрыть на ремонт 5 станций на юг Питомцы 
Собянин анонсировал запуск завода «Москвич» 

Синоптик рассказал, когда в Москве начнутся заморозки 

Главврач рассказала о правилах записи в столичные поли 

В Москве появился мурал к столетию российского джаза 

Началась реставрация Спасо-Преображенского собора 

Москвичи могут проверить здоровье в 72 центрах госуслу! 

В Москве за сутки выявили 711 случаев COVID-19 


Слушать щебет птиц полезно для психического здоровья 


Названы победители конкурса Nature Conservancy 2022. d 


ДЕТИ Что должен знать родитель старшеклассника: расск 
HI-TECH Найден идеальный рабочий ноутбук от известногс 
новости Предпринимателям Москвы рассказали, как бес 


HI-TECH Найден ноутбук для повседневных задач 
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Что скрывается за кажущейся 


простотой? 


1. Несколько 
типов 
новостей 


2. Разные 
источники 
новостей 


3. Аналитика 


Новости Спецоперация Москва Спорт Леди Авто Игры 


Дети 


Как будет работать режим повышенной готовно‹ Здоровье 


Указ, который подписал президент РФ Владимир [T Дом 


Власти запланировали закрыть на ремонт 5 станций на юг Питомцы 
Собянин анонсировал запуск завода «Москвич» 
Синоптик рассказал, когда в Москве начнутся заморозки 
Главврач рассказала о правилах записи в столичные поли 
В Москве появился мурал к столетию российского джаза 
Началась реставрация Спасо-Преображенского собора 
Москвичи могут проверить здоровье в 72 центрах госуслу! 
В Москве за сутки выявили 711 случаев COVID-19 
Слушать щебет птиц полезно для психического здоровья 
Названы победители конкурса Nature Conservancy 2022. d 
ДЕТИ Что должен знать родитель старшеклассника: pacck 
HI-TECH Найден идеальный рабочий ноутбук от известногс 
новости Предпринимателям Москвы рассказали, как бес 


HI-TECH Найден ноутбук для повседневных задач 
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Что скрывается за кажущейся 
простотой? 


Новости Спецоперация Москва Спорт Леди Авто Игры 


1. Несколько 
типов 
новостей 


Дети 


Здоровье 


Как будет работать режим повышенной готовно‹ 
Указ, который подписал президент РФ Владимир [T Дом 


Власти запланировали закрыть на ремонт 5 станций на ю! Питомцы 


Собянин анонсировал запуск завода «Москвич» 


Синоптик рассказал, когда в Москве начнутся заморозки 


Главврач рассказала о правилах записи в столичные поли 4. Свои новости и табы 


В Москве появился мурал к столетию российского джаза для paaH ых рег ионов 
Началась реставрация Спасо-Преображенского собора 


Москвичи могут проверить здоровье в 72 центрах госуслу! 
В Москве за сутки выявили 711 случаев COVID-19 
2. Разные Слушать щебет птиц полезно для психического здоровья 
источники Названы победители конкурса Nature Conservancy 2022. d 


новос теи ДЕТИ Что должен знать родитель старшеклассника: расск 


НІ-ТЕСН Найден идеальный рабочий ноутбук от известногс 


3. Аналитика новости Предпринимателям Москвы рассказали, как бес 
Frontend 


HI-TECH Найден ноутбук для повседневных задач Conf 2022 
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Что скрывается за кажущейся 
простотой? 


Новости Спецоперация Москва Спорт Леди Авто Игры 


1. Несколько 
типов 


новост еи pia Как будет работать режим повышенной готовнос 


Дети 


Здоровье 
Дом 


Питомцы 


Указ, который подписал президент РФ Владимир FT: 


Власти запланировали закрыть на ремонт 5 станций Hà ю 
Собянин анонсировал запуск завода «Москвич» 


Синоптик рассказал, когда в Москве начнутся заморозки 


Главврач рассказала о правилах записи в столичные поли 4 Сбо и нобос mu и m аб bl 


B Москве появился мурал к столетию российского джаза для разных регионо в 
Началась реставрация Спасо-Преображенского собора 


Москвичи могут проверить здоровье в 72 центрах госуслу! 


5. Анимации 


В Москве за сутки выявили 711 случаев COVID-19 


2. Разные Слушать щебет птиц полезно для психического здоровья 
источники 


новостей ДЕТИ Что должен знать родитель старшеклассника: расск: 
HI-TECH В России появился сайт, где можно узнать о науке 


3. Аналитика новости Предпринимателям Москвы рассказали, как бес! 


Frontend 


HI-TECH Найден стильный ноутбук, который приятно удивл 
Conf 2022 


Что скрывается за кажущейся 
простотой? 


Новости Спецоперация Москва Спорт Леди Авто Игры -- 


1. Несколько 


типов 


Дети 


новостей Здоровье 


Дом 


Питомцы 


4. Свои новости и табы 
для разных регионов 


5. Анимации 


6. Скелетоны 
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2. Разные. 
ucmouHuku 
новостей 


3. Аналитика 


Что скрывается за кажущейся 
простотой? 


1. Несколько 
типов 
новостей 


Новости Спецоперация Москва Спорт Леди Авто Игры 


Дети 


Здоровье 


Как будет работать режим повышенной готовно‹ 
Указ, который подписал президент РФ Владимир [T Дом 


Власти запланировали закрыть на ремонт 5 станций на ю! Питомцы 


Собянин анонсировал запуск завода «Москвич» 


Синоптик рассказал, когда в Москве начнутся заморозки 
Главврач рассказала о правилах записи в столичные поли 
В Москве появился мурал к столетию российского джаза 
Началась реставрация Спасо-Преображенского собора 
Москвичи могут проверить здоровье в 72 центрах госуслу! 
В Москве за сутки выявили 711 случаев COVID-19 

2. Разные Слушать щебет птиц полезно для психического здоровья 

источники Названы победители конкурса Nature Conservancy 2022. d 


новос теи ДЕТИ Что должен знать родитель старшеклассника: расск 


НІ-ТЕСН Найден идеальный рабочий ноутбук от известногс 


3. Аналитика новости Предпринимателям Москвы рассказали, как бес 


HI-TECH Найден ноутбук для повседневных задач 


4. Свои новости и табы 
для разных регионов 


5. Анимации 


6. Скелетоны 


7. Адаптивная 


Верстка 
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Что скрывается за кажущейся 


простотой? 


1. Несколько 
типов 
новостей 


Как будет работать режим повышенной готовно‹ 
Указ, который подписал президент РФ Владимир П 


Власти запланировали закрыть на ремонт 5 станций на юг 
Собянин анонсировал запуск завода «Москвич» 
Синоптик рассказал, когда в Москве начнутся заморозки 
Главврач рассказала о правилах записи в столичные поли 
В Москве появился мурал к столетию российского джаза 
Началась реставрация Спасо-Преображенского собора 
Москвичи могут проверить здоровье в 72 центрах госуслу! 
В Москве за сутки выявили 711 случаев COVID-19 
2. Разные Слушать щебет птиц полезно для психического здоровья 
источни "nM Названы победители конкурса Nature Conservancy 2022. d 
новостей ДЕТИ Что должен знать родитель старшеклассника: расск 
HI-TECH Найден идеальный рабочий ноутбук от известногс 


3. Аналитика новости Предпринимателям Москвы рассказали, как бес 
HI-TECH Найден ноутбук для повседневных задач $. SSR 


Новости Спецоперация Москва Спорт Леди Авто Игры 


Здоровье 


Питомцы 


4. Свои новости и табы 
для разных регионов 


5. Анимации 


6. Скелетоны 


7. Адаптивная 


Верстка 
Frontend 
Conf 2022 
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Что скрывается за кажущейся 
простотой? 


Новости Спецоперация Москва Спорт Леди Авто Игры 


1. Несколько 


типов Дети 
новостей Как будет работать режим повышенной готовно‹ Здоровье 
Указ, который подписал президент РФ Владимир [T Дом 
Власти запланировали закрыть на ремонт 5 станций на ют Питомцы 
Собянин анонсировал запуск завода «Москвич» 
Синоптик рассказал, когда в Москве начнутся заморозки 
Главврач рассказала о правилах записи в столичные поли 4. Свои новости и табы 
В Москве появился мурал к столетию российского джаза для раз ных рег чоно в 
Началась реставрация Спасо-Преображенского собора 
Москвичи могут проверить здоровье в 72 центрах госуслу! 
В Москве за сутки выявили 711 случаев COVID-19 5. Анима uuu 
2. Разные Слушать щебет птиц полезно для психического здоровья 
источники m 6. Скелетоны 
новостей 


„ 9. Мониторинг ошибок 
н (6 данных) 7. Адаптивная 


HOBOcC i4 ппредпиринимателнм москвы рассказали, как UBU | Вёрст ка 


8. SSR 


3. Аналитика 


Frontend 


HI-TECH Найден ноутбук для повседневных задач 
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Что скрывается за кажущейся 
простотой? 


Новости Спецоперация Москва Спорт Леди Авто Игры 


1. Несколько 
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типов Дети 
новостей Как будет работать режим повышенной готовнох Здоровье 
Указ, который подписал президент РФ Владимир [T Дом 
Власти запланировали закрыть на ремонт 5 станций Hà ю! Питомцы 
Собянин e' 
Синопт орозки 
bon 1 O iiim 4. СВои новости и табы 
а .€0 э э w для разных регионов 
Начал: jopa 
Москви‹ госуслу! 
В Москве: Заз; е еннен ern rn rap клы чече ОЕ О 5. AHuMauu u 
2. Разные Слушать щебет птиц полезно для психического здоровья 
источники m 6. Скелетоны 
нобостей к 9. Мониторинг ошибок 


н (В данных) 7. Адаптивная 


3 А А налии ика НОВОчти 1рециринимателнм москвы рассказали, как UBU | Вёрс тка 
HI-TECH Найден ноутбук для повседневных задач 8. SSR FC 
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Большой трафик = высокая 
ответственность 


* Изменения опыта (фичи) катятся плавно 
через А/В-тесты 


e Тщательный анализ статистики 
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Большой трафик = высокая 
ответственность 


* Изменения опыта (фичи) катятся плавно 
через А/В-тесты 


e Тщательный анализ статистики 


Одновременно могут быть запущены 
несколько экспериментов с различным 
набором включённых фич 
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Как сделать опыт миллионов 
пользователей лучше? 


Улучшение 
персонализации 


+ новые системы рекомендаций 


+ больше вариантов отображений 


+ добавление типов новостей 
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O2 


Сигналы скорого бедствия 


МУР, его проблемы 
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Задача: новая система 
рекомендаций 


Важно быстро 
«ul use:analytics» 

запустить Фичу {#еасһ newsItems as item) 

«li 

classz"news-item" 

class:news-item  loading-"[item.isLoading)" 


[fitem.title) 
</11> 

{/еасһ} 
«/ul» 


Минимальные 
изменения 1 
существующей логики 


1 
2 
3 
4 
5 
6 > 
7 
8 
9 
0 
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5О 


Тип новости (напоминание 


Новости Спецоперация Москва Спорт Леди Авто Игры --- 


Дети 


Как будет работать режим повышенной готовно‹ Здоровье 


1 Указ, который подписал президент РФ Владимир Mh) Дом 


Власти запланировали закрыть на ремонт 5 станций на Io! Питомцы 
Собянин анонсировал запуск завода «Москвич» 
Синоптик рассказал, когда в Москве начнутся заморозки 
Главврач рассказала о правилах записи в столичные поли 
В Москве появился мурал к столетию российского джаза 
y Началась реставрация Спасо-Преображенского собора 
Москвичи могут проверить здоровье B 72 центрах госуслу! 


В Москве за сутки выявили 711 случаев COVID-19 


Слушать щебет птиц полезно для психического здоровья 


Названы победители конкурса Nature Conservancy 2022. Ф 
ДЕТИ Что должен знать родитель старшеклассника: расск: 
HI-TECH Найден идеальный рабочий ноутбук от известногс 


3 новости Предпринимателям Москвы рассказали, как бес 


Frontend 


HI-TECH Найден ноутбук для повседневных задач Conf 2022 


Пример 
исходного 
кода с 
условиями : E е" 


«ul use:analytics» 
{#еасһ newsItems as item) 
{#11 item.type === NewsType.WithImage) 
«li 
classz'"news-item--with-image" 
class:news-item--with-image  loading-"iitem.isLoading]" 


л Uu моны 


{item.title} 
10 {item. description} 
Нов "T 11. </11> 
ооость с картинкои 12 ГҮР 


13 <11 
class-"news-item'" 
15 class:news-item  loading-"[item.isLoading)" 
16 
Обычная новость 17 {item.title} 
18 </li> 
19 {/if} 
20 {/each} 
21 </ul> 
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Изначальные условия, влияющие 
на отрисовку 


‚Тип новости? 

e Статус загрузки новости? 

e [nn анимации: появления/обновления? 
e Новость на главном табе? 

e Показывали ли такую новость ранее? 


Всё ли тут хорошо? 
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Conf 2022 


о со м су (їл i» о Мм H 
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ооо “м СУ (л & ш) NH © (Qo чо (л Ь б) N ын © 


«ul use:analytics» 
{#еасһ newsItems as item) 


{#11 recommendationSystem.type === SOME RECOMMENDATION SYSTEM } 


{#11 item.type === NewsType.WithImage) 
<li 
class="news-item--with-image" 
class:news-item--with-image__loading="{item. isLoading}" 
> 
«img src="{item.src}" ... /> 
{item.title} 
{item. description} 
</li> 
{:else} 
<li 
class="news-item" 
class:news-item  loading-"[item.isLoading]" 


{item.title} 
«/li» 


class-'news-item" 
class:news-item  loading-"[item.isLoading]" 


{item.title} 
«/li» 
{/if} 
{/each} 
</ul> 


MVP: 6bicTpo 
и дешево 
через 
If...else'* 


Система рекомендации = 
новый источник 


Не все типы новостей 
есть у новой системы 
рекомендаций 
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Итог реализации MVP через 
If...else 


* Быстро запустили фичу минимальными силами — 
задача выполнена! 


° HO... 
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Итог реализации MVP через 
If...else 


* Быстро запустили фичу минимальными силами — 
задача выполнена! 


° HO... 


Time То Market (ТТМ) стал падать ® 
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Побочные эффекты роста числа 
фич — долгое тестирование? 


К 
Время у fix) РА 
тестирования 


Цху=х 


0 Х Число фич 


Экспоненциальный рост времени тестирования FC Frontend 
ОГТ 2022 


Побочные эффекты роста числа 
фич — долгое тестирование? 


К 
Время у fix) РА 
тестирования 


Цху=х 


Boolean Explosion 


Автотесты B помощь! 


0 Х Число фич 


Экспоненциальный рост времени тестирования FC Frontend 
ОГТ 2022 


Побочные эффекты роста числа 
фич — долгая разработка? 


Скорость | $ 


разработки 
А. Точка 
окупаемости 


Frontend 


Зависимость скорости разработки от времени 
FC Conf 2022 


развития проекта 
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Проблемы с TIM 


* Быстрая разработка — быстрое o) 
* Быстрая разработка — долгое тестирование 


e Полгая разработка — долгое тестирование 
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Проблемы с TIM 


* Быстрая разработка — быстрое o) 
* Быстрая разработка — долгое тестирование 


e Полгая разработка — долгое тестирование 
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Скорое бедствие? 


„Ке ——— 


Изображение: Тонущее судно (http//korabley.net/news tonush 
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O3 


Круг спасения: внедрение 
машины состояний 


FSM и eë реализация 


Frontend 
Изображение: Спасательный круг (https//www.freepng.ru/png-pisw67/) Conf 2022 
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MVP: признаки проблемы 


e Пересечение экспериментов стало «болью» 


* Логика в шаблоне начала расти (появилась смесь 
работы с системами рекомендаций и отображением) 


Причина: верстка и данные по-настоящему не 
изолированы? 
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МУР: признаки проблемы 


e Пересечение экспериментов стало «болью» 


e Логика в шаблоне начала расти (появилась смесь 
работы с системами рекомендаций и отображением) 


Причина: вёрстка и данные по-настоящему не 
изолированы? 


Да, но почему ранее проблем не было? 
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Изначальные условия, влияющие 
на отрисовку 


‚Тип новости? 

* Статус загрузки новости? 

e [nn анимации: появления/обновления? 
e Новость на главном табе? 

e оказывали ли такую новость ранее? 


Всё ли тут хорошо? 


Все условия были изолированными, не 
зависели друг от друга Ес T" 


ОПГ 2022 
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Какие ошибки были допущены? 


e Некоторые условия стали зависеть от других 
* С ростом системы проблема усугубляется 
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Пример «зависимых» условий 


e 13Ех!3{ — существование 
* isEnabled – включение (без существования?) 
* isLoading — загрузка (без включения?) 


Какой ментальный смысл у состояния, когда идёт 
(rm ресурсов выключенной фичи? 


Надо как-то ограничивать число возможных состояний 
(комбинации переменных) 
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Какие ошибки были допущены? 


e Некоторые условия стали зависеть от других 
* С ростом системы проблема усугубляется 


e Логика в шаблоне начала расти — без неё невозможно 
понять, что происходит 
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Решение 


Отделим данные от вёрстки 


Ограничим число валидных состояний 


Frontend 
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Новая архитектура — 
Model—-view-controller (MVC) 


* Вид — это вёрстка, которая He 


должна знать о данных ( MODEL 
м Контроллер E некоторое Mn MANIPULATES 

единое место-обработчик 

сигналов для обновления VIEW CONTROLLER 

данных B Модели 

N 
Ф, "d 
% # 

e Модель — это набор данных, рл / 

валидность состояний USER 


которого и надо ограничивать 


Frontend 
Изображение: Википедия (https;//commons.wikimedia.org/wiki/File:MVC-Process.png) Conf 2022 
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State Machine 


Машина состояний (или автомат, State Machine) — 
математическая абстракция, основанная на модели 
дискретного устройства: 


• ОДИН ВХОД, 
• ОДИН ВЫХОД, 


* B каждый момент времени — в одном состоянии из 
множества возможных 


Frontend 
Изображение: Википедия (https//ru.wikipedia.org/wiki/Db'ain;/A6crpakrHei aBroMarjpg) Conf 2022 
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FSM в Модели для работы c 
состоянием 


* Конечная машина состояний (Finite State Machine) — 
число внутренних состояний конечно 


e Детерминированность — следующее состояние 
однозначно определяется текущим состоянием и 
входом 
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FSM: способы представления 


* Формально: А = (X, S, So, 6, Е), где: 
* X— входной алфавит (набор событий); 
* S — конечное непустое множество состояний; 
* So — начальное состояние, элемент множества S; 


e ô — функция перехода между состояниями: Ô: 5 х X — S 
(Р(5)), то есть ô вернёт набор состояний; 


e Е — это конечный набор финальных состояний, 
(возможно, пустое) подмножество 5. 
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FSM: удобные способы 
представления 


e Таблица переходов 
* Граф переходов (можно в UML) 


Лампочка 
1 GQstartuml 
оп 2 
| й | 3 title Лампочка 
‘свет включен „ 4 
5 [ж] ——> off 
6 off : свет выключен 
TURN OFF TURN ON 7 off ——> on : TURN ON 
8 оп : свет включён 
9 оп -> off : TURN OFF 
10 
off 11 @enduml 


CBeT выключен y Frontend 
Conf 2022 
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FSM: выбор библиотеки 


e Она He нужна 
e горої5 (1КВ), если сильно хочется 


‚ 9/11/2021 


Будем рисовать стрелочки 


Расскажу про причины перехода на микросервисную архитектуру на фронтенде в Конечный автомат Redux 


Почте Mail.ru. Поделюсь опытом создания такого небольшого микрофронтенда „ 
e Множество конечных ————>» e Единый store 


состояний 


Mail.ru без стейт-менеджеров Ha react-hooks. Обсудим архитектуру на конечных 


автоматах и причём тут Flux. Также поговорим про то, как literal types в связке с 


union types в typescript могут гарантировать консистентность потока данных M : 
УР УР P утгар P n e Множество сигналов —————————p» e Actions 
состояния приложения. 


® Функция переходов e Reducer 


Для реализации описанных машин состояний 
что-то мощное (в духе XState) не нужно! 
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FSM: реализация 


e Главное — придумать граф 
‹ Граф = документация (не только для разработчиков) 


В блоке новостей было более 10 состояний! 


Frontend 
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FSM новостей 


Блок новостей (1 источник) 


получаем новости сразу при SSR 


( showing ї 


\показываем новости | 


UPDATE NEWS |SHOW NEWS 


updating 


загружаем новые новости | 


Переключение табов? 


' updatingBase 


57 
Блок новостей (2 источника: Base и Extra) 


Безусловные переходы 


isExtraNews === true (фича включена) 


Í loadingExtra 


допустим не можем 525 получить такие новости | 


LOAD РАШ [ОАО SUCCESS 


/ showingBase | 


| | 
2 Е 


/ showingExtra \ 


UPDATE |UPDATE SUCCESS 


updatingExtra 


Frontend 
Conf 2022 


Блок новостей (2 источника: Вазе и Ех{га) 


FSM новостей c 


idle 


переключением 


табов 


Y "sd 
showingBase 


я 


TAB SWITCH 


j 
| 


А 
| ОРОАТЕ SUCCESS UPDATE 


idleTabSwitch 
y рекомендаций 
| 


заново определяем систем 
= 2d LN “ы. 
'isExtraNews === true (фича включена} \ Е ы. \ 
E \ a S = 
updatingExtra | updatingBase 
[ТАВ SWITCH 
| ^ Р / 
\ UPDATE “т UPDATE. SUCCESS / 


` Ра 
. | showingExtra |“ и 


p LOAD FAIL 
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isExtraNews === true (фича включена} 


E. 


loadingExtra 


допустим He можем 525 получить такие новости 


LOAD SUCCESS 


Frontend 
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FSM: светлое будущее наступило? 


* Успешно запустили более 
10 А/В-экспериментов 


e Строгая документация 


e Разделение Вида и 
Модели ускорило 
тестирования 


e Снизился Time To Market 


Frontend 
Conf 2022 


Изображение: Валдай-45Р (http;//www.ckbspk.ru/media/images/9c8988e5-5659-4b31-975b-b7bf258561e4 jpg) Ré 
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FSM: светлое будущее не 
наступило... 
Но: 


* Быстрый рост графа с 
— — —2»- State Explosion 
увеличением числа фич P 


Frontend 
Conf 2022 


Изображение: Валдай-45Р (http:;//www.ckbspk.ru/media/images/9c8988e5-5659-4b31-973b-b7bf258561e4.jpg) FC 


State Explosion (1, 2) 


2) VALID ENABLED 
VALID DISABLED 


Изображения: https;//statecharts.dev/valid-invalid.svg, https//statecharts.dev/valid-invalidc-enabled-disabled-no-transitions.svg, 


https//statechar! 


ts.dev/valid-invalid-enabled-disabled.svg 


INVALID ENABLED 
INVALID DISABLED 


VALID DISABLED 


INVALID DISABLED 


61 


4/8 
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State Explosion (5) 
5) 


VALID ENABLED UNCHANGED y INVALID ENABLED UNCHANGED 


EN" 


VALID DISABLED UNCHANGED \| INVALID DISABLED UNCHANGED 
c 


v 
u 


VALID ENABLED UNCHANGED INVALID ENABLED UNCHANGED 


VALID DISABLED UNCHANGED INVALID DISABLED UNCHANGED 


VALID DISABLED CHANGED INVALID DISABLED CHANGED 


VALID ENABLED CHANGED INVALID ENABLED CHANGED 


VALID DISABLED CHANGED INVALID DISABLED CHANGED 


3/24 


Изображения: https://statecharts.dev/valid-invalid-enabled-disabled-changed-unchanged-no-transitions.svg, 
https//statecharts.dev/valid-invalid-enabled-disabled-changed-unchanged.svg 
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FSM: светлое будущее не 
наступило... 
Но: 


* Быстрый рост графа с 
— — —»- State Explosion 
увеличением числа фич P 


e Некоторые состояния 
хотелось сгруппировать и 
изолировать от других 


——) 


• Невозможность >? 


асинхронного обновления 
части новостей (части 
состояния 
Е 


Conf 2022 
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O4 


Отказ oT машины состояний? 


Не опять, a снова! 


Frontend 
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Statechart приходит на помощь! 


entry / turn light on 
exit / turn light off 


entry / turn light on 
exit / turn light off 


FSM Statechart 


Изображения: https;//statecharts.dev/on-off.svg, https //statecharts.dev/on-off-delayed-exit-1T-zoomed.svg, Ponens 
httos://statecharts.dev/glossary/parallel.svg жеее 


Сущности Statechart 


* Контекст (Context) 

* Охраняемые (условные) переходы (Guarded transitions) 
* Действия (Ha вход, выход и переход) (Actions) 

* Параллельные состояния (Orthogonal, parallel states) 

* Вложенные состояния (Hierarchical, nested states) 


e История (историческое состояние, History) 
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Statechart: контекст и действия 


* Помимо текущего состояния (строки), можно хранить 
и набор данных 


e При отправке события можно отправлять данные — 
действия будут принимать данные и обновлять 
контекст 
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oStatechart: условные переходы 
e Действия реагируют на переход в состояние 


e Для предотвращения входа в состояние можно 
добавлять условия 


Frontend 
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leave home 


on a walk 


walking slow down running 


sudden stop 


speed up sudden speed up 


stopping to sniff good smells 


arrive home 


walk complete 
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Statechart: 
вложенные 
состояния 


entry / turn light on 
exit / turn light off 


- | 
flick 
Суперсостояние 


Изображение: Е а 
https//xstate Js.org/docs/assets/Img/compound- ronten 


state.e9bfccbb.svg Conf 2022 


waiting 


leave home 


sudden stop 


ѕрееа ир sudden speed up 


stopping to sniff good smells 


wagging starts 


not wagging wagging 


wagging stops 


arrive home 


walk complete 


Statechart: 
параллельные 
состояния 
ив Е 
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FSM: светлое будущее не 
наступило... 
Но: 


* Быстрый рост графа с 


————> State Explosion? 
увеличением числа фич ны 


e Некоторые состояния 
хотелось сгруппировать и 
изолировать от других 


————= Вложенные состояния 


. Невозможность — ——»- Параллельные состояния 


асинхронного обновления 
части новостей (части 


СОСТОЯНИЯ 
FC Frontend 
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Решение проблемы State 
Explosion 
1) : 5) 


VALID INVALID 
VALID INVALID 
ENABLED » DISABLED 


тоноо) T CHANGED 


Изображения: https//statecharts.dev/valid-invalid.svg, osi sedi 
https//statecharts.dev/valid-invalid-enabled-disabled-changed-unchanged-parallel.svg 
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FSM: светлое будущее не 
наступило... 
Но: 


* Быстрый рост графа с | 
————=> State Explosion 
увеличением числа фич P 


e Некоторые состояния 
хотелось сгруппировать и 
изолировать от других 


— > Вложенные состояния 


. Невозможность — ——»- Параллельные состояния 


асинхронного обновления 
части новостей (части 


СОСТОЯНИЯ 
FC Frontend 
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XState 


e Создана для реализации Statechart 
e Имеет развитую инфраструктуру: 
e Визуализатор stately.al/viz 
e Расширения nna Chrome, VS Code 
“И даже больше: поддерживает сохранение стейта в 


localStorage 
X STATE 


Frontend 


Conf 2022 
Изображение: XState (https//raw.githubusercontent.com/statelyai/public-assets/main/logos/xstate-logo-black-nobg.svg) L3 


Синтаксис XState 


Лампочка 1 import { createMachine ) from "xstate"; 
2 
3 сгеа+еМасһіпе({ 
on 4 іа: "light", 
[ | 5 initial: "off", 
свет включён | 6 states: { 
Е - 7 off: { 
8 оп: { 
9 TURN ON: "on", 
TURN OFF TURN ON 10 ; }, 
11 : 
12 on: 1 
13 on: { 
off | 1 estartuml 14 TURN OFF: "off", 
| | 2 15 }, 
3 title Jl 16 u 
CBeT выключен | itie Лампочка P }, 
4 18 }) 
5 [x] —> off 
Граф 6 off : свет выключен 
7 off --» on : TURN ON 
8 оп : свет включён XState 
9 оп -» off : TURN OFF 
10 
11  Qenduml 


Больше примеров: https://xstate-catalogue.com 


TURN, OFF 


—— TURN. ON —» ^?" 


stately.ai/viz 
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Граф модели Statechart для 
новостей - 1 


Блок новостей (2 источника: Base и Extra) 


extraNews 
idle 
isExtraNews === true (фича включена) =) палеа 
€ always  [isExtraNews] : updating : 
loadingExtra 
допустим He можем S2S получить такие новости ? 
LOAD FAIL |LOAD SUCCESS baseNews 
Y 
| showingBase showingExtra 
UPDATE SUCCESS 
e Е npn showinc UPDATE 
updatingBase updatingExtra 


Frontend 
FC Conf 2022 


Без переключения табов 
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import {+ createMachine } from "xstate"; 


Statechart для 2 
новостей - 2 | 


13 target: "#news.extraNews. loading", 
14 cond: "isExtraNews", 


1 target: "£Znews.baseNews.showing", 


extraNews 20 }, 


"parallel", 
к 
showing: 1 
on: { 
UPDATE: ( target: "updating" }, 


idle € always  [isExtraNews] 


baseNews 28 }, 
29 }, 

30 updating: 
UPDATE SUCCESS updating: 1 
on: { 


UPDATE SUCCESS: { target: "showing" }, 


C асте UPDATE 


Frontend 


Без переключения табов Conf 2022 
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38 extraNews: { 


39 type: "parallel", 
раф модели E X 
41 loading: 1 
42 on: 1 
Gt at e C h a rt Л Я 43 LOAD SUCCESS: { target: "showing" }, 
Д 44 }, 
45 }, 
> 46 showing: 1 
новостей - 5 EON 
48 UPDATE: { target: "updating" }, 
49 }, 
50 bs 
51 updating: { 
52 on: { 
53 UPDATE SUCCESS: { target: "showing" }, 
54 }, 
55 }, 
56 }, 
extraNews 57 }, 
58 }, 
59 }, 
idle € always  [isExtraNews] м { guards: { 
62 isExtraNews, 
63 }, 
baseNews 64 } 
65 ); 
66 


UPDATE SUCCESS 


€ always 


UPDATE 


Frontend 


Без переключения табов Conf 2022 


Граф модели Stat 


новостей 


Блок новостей (2 источника: Base и Extra) 


У 
idle 
sExtraNews === true (фича включена} 
aà 
loadingExtra 
допустим не можем 525 получить такие новости 
| LOAD FAIL 
| 
Y 4 
showingBase == 
4 
TAB SWITCH 
& 
idleTabSwitch 
| UPDATE SUCCESS МРОАТЕ LOAD SUCCESS 
заново определяем систему рекомендаций 
k v 
K 


isExtraNews === true (фича включена) 

LI a 

updatingExtra updatingBase 
TAB_SWITCH 


| 
\ УРОАТЕ UPDATE SUCCESS 
EY 4 === 
_| showingExtra |“ - - 


baseNews 


UPDATE_SUCCESS 


UPDATE 


idle 


idleTabSwitch 
extraNews 


€ always  [isExtraNews] 


€ always  [isExtraNews] 


TAB. SWITCH 


C переключением Ta6oB 


echart nna 


FC 
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«script» 
import ( useMachine ) from 'Qxstate/svelte'; 
import ( createMachine ) from 'xstate'; 


const toggleMachine = createMachine(1 
id: 'toggle', 
initial: 'inactive', 
states: 1 
inactive: (1 
on: ( TOGGLE: 'active' } 


}, 
active: { 
оп: ( TOGGLE: 'inactive' } 
) 
) 
}); 


const ( state, send } = useMachine(toggleMachine); 
«/script» 


«button on:click-(() => send('TOGGLE'))» 
($state.value === 'inactive' 
? 'Click to activate' 
'Active! Click to deactivate') 
«/button» 
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Использование 
XState 


Frontend 
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O5 


Использование модели Statechart = 
светлое будущее? 


Результаты, советы и выводы 


Frontend 
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Результаты внедрения XState: для 
пользователей 


* Успешно запустили более 20 фич в блоке новостей, ещё 
больше А/В-тестов 


* Эксперименты, связанные с отображением новостей, 
проходят независимо от данных 


e Число багов снизилось до единичных случаев, 
пользователи получили скелетоны и другие улучшения UX 
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Результаты внедрения Xstate: для 
команды 


Добавление нового типа/источника новостей сводится к созданию нового 
узла в графе 


e Граф — понятная документация как для менеджеров, так и для разработчиков 
итестировщиков 


* С использованием Statechart исчезла необходимость тестирования 
смежных узлов в графе — только добавляемый, снизился Time То Market в 5 
раза 


* Задачи поменяли свою форму — вместо создания новой фичи для 
конкретного таба — теперь она сразу доступна на всех табах и управляется 


отдельным конфигом менеджерами 
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B 6noke новостей более 25 состояний (и меньше никак)! 
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Текущие проблемы 


С добавлением разных типов новостей увеличилась 
сложность разработки нового суперсостояния 
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Советы 


* Модель должна хранить только актуальные данные, 
если нужно кэширование — оно должно быть не в 
модели Statechart, a на уровне выше 


e Состояние необязательно должно иметь один 
транспорт для получения данных, оно должно 
отражать ментальное состояние данных 
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Изображение: Wonder о the Seas (https //thepointsguy global.sslfastly.net/us/originals/2022/02/Wonder---scaled ра) 


«Суть хорошего программирования в 
отсроченном вознаграждении» 
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= Алан Купер 
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# 


Один компонент, 20+ фич, 
А /В-тесты: поможет ли 
машина состояний? 


Денис Стасьев, ex VK 


(oQDenisStasyev 


= 
Frontend 
Conf 2022 
« 


